import styled from "styled-components";
import { Button } from "antd";
import { Icon } from "@/components/icon";
interface TableHeaderProps {
	title?: string;
	tableHeaderRightSlot?: React.ReactNode;
	isShowCustom?: boolean;
	setShowSelectCustom?: (showSelectCustom: any) => void;
}

const TableHeader = ({ title, tableHeaderRightSlot, isShowCustom, setShowSelectCustom }: TableHeaderProps) => {
	const tabHeight = "var(--text-lg)";
	const bgc = "var(--primary)";
	const StyledContainer = styled.div`
    .table-header-title {
      padding-left: 12px;
      position: relative;
      &::before {
        position: absolute;
        top: 4px;
        left: 2px;
        content: '';
        display: block;
        width: 4px;
        height: ${tabHeight};
        background-color: ${bgc};
      }
    }
  `;
	// 自定义
	const customHandle = () => {
		console.log("customHandle");
		setShowSelectCustom?.(true);
	};
	return (
		<div>
			<StyledContainer>
				<div className="flex justify-between pb-2 items-center">
					{title && <div className="table-header-title text-lg font-bold">{title}</div>}
					<div className="flex gap-2">
						{tableHeaderRightSlot && <div className="flex gap-2">{tableHeaderRightSlot}</div>}
						{isShowCustom && (
							<Button color="primary" variant="outlined" onClick={customHandle}>
								<Icon icon="mdi:cog" />
								自定义
							</Button>
						)}
					</div>
				</div>
			</StyledContainer>
		</div>
	);
};

export default TableHeader;
